<!DOCTYPE html>
<html>

<head>
    <base href="{#location.origin#}/res/smartadmin-402/" />
    <meta charset="utf-8">
    <title>
        主面板 - {#uim.config.app_name#}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <!-- Call App Mode on ios devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- base css -->
    <link rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
    <link rel="stylesheet" media="screen, print" href="css/app.bundle.css">
    <!-- Optional: page related CSS-->
</head>

<body>
    <!-- BEGIN Page Wrapper -->
    <div class="page-wrapper alt">
        <!-- BEGIN Page Content -->
        <!-- the #js-page-content id is needed for some plugins to initialize -->
        <main id="js-page-content" role="main" class="page-content">

            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">{#uim.config.app_name#}</a></li>
                <!-- <li class="breadcrumb-item">Application Intel</li> -->
                <li class="breadcrumb-item active">主面板</li>
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span
                        class="jjs-get-date">{#uim.dateTime()#}</span></li>
            </ol>
            <div class="subheader">
                <h1 class="subheader-title">
                    <i class='subheader-icon fal fa-chart-area'></i> 主面板</span>
                </h1>
            </div>
            <div class="row">
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_respool">--</span>/<span class="show-count"
                                    data-type="count_respool_area">--</span>
                                <small class="m-0 l-h-n">资源池/可用区</small>
                            </h3>
                        </div>
                        <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-info-400 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_project">--</span>/<span class="show-count"
                                    data-type="count_project_app">--</span>
                                <small class="m-0 l-h-n">项目/应用</small>
                            </h3>
                        </div>
                        <i class="ni ni-my-apps position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
                            style="font-size: 6rem"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-danger-400 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server2">--</span>/<span class="show-count"
                                    data-type="count_server3">--</span>
                                <small class="m-0 l-h-n">路由/网关</small>
                            </h3>
                        </div>
                        <i class="fal fa-map-signs position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-warning-600 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server5">--</span>/<span class="show-count"
                                    data-type="count_server6">--</span>
                                <small class="m-0 l-h-n">主控/消费机</small>
                            </h3>
                        </div>
                        <i class="fal fa-sitemap position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server4">--</span>
                                <small class="m-0 l-h-n">队列、缓存服务器</small>
                            </h3>
                        </div>
                        <i class="fal fa-filter position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
                            style="font-size: 6rem"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-success-500 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server1">--</span>
                                <small class="m-0 l-h-n">静态资源服务器</small>
                            </h3>
                        </div>
                        <i class="fal fa-paper-plane position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-primary-100 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server7">--</span>
                                <small class="m-0 l-h-n">反向代理服务器</small>
                            </h3>
                        </div>
                        <i class="fal fa-repeat-alt position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="p-3 bg-primary-400 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span class="show-count" data-type="count_server0">--</span>
                                <small class="m-0 l-h-n">扩展服务器</small>
                            </h3>
                        </div>
                        <i class="fal fa-server position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n1"
                            style="font-size: 6rem;"></i>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div id="panel-1" class="panel ppanel-locked">

                        <div class="panel-hdr">
                            <h2>整体负载</h2>
                            <div class="panel-toolbar">
                                <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Collapse"></button>
                                <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Fullscreen"></button>
                                <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Close"></button>
                            </div>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content poisition-relative">
                                <div class="pb-5 pt-3">
                                    <div class="row">
                                        <div class="col-4 col-xl-4 d-sm-flex align-items-center">
                                            <div class="p-2 mr-3 bg-success-200 rounded">
                                                <span class="peity-bar"
                                                    data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
                                            </div>
                                            <div>
                                                <label class="fs-sm mb-0">在线用户</label>
                                                <h4 class="font-weight-bold mb-0">759</h4>
                                            </div>
                                        </div>
                                        <div class="col-4 col-xl-4 d-sm-flex align-items-center">
                                            <div class="p-2 mr-3 bg-info-200 rounded">
                                                <span class="peity-bar"
                                                    data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
                                            </div>
                                            <div>
                                                <label class="fs-sm mb-0">接口吞吐</label>
                                                <h4 class="font-weight-bold mb-0">800</h4>
                                            </div>
                                        </div>
                                        <div class="col-4 col-xl-4 d-sm-flex align-items-center">
                                            <div class="p-2 mr-3 bg-warning-200 rounded">
                                                <span class="peity-bar"
                                                    data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
                                                <!-- <span class="updating-chart">6,4,7,5,6</span> -->
                                            </div>
                                            <div>
                                                <label class="fs-sm mb-0">请求积压</label>
                                                <h4 class="font-weight-bold mb-0">900</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="flotVisit" style="width:100%; height:208px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>
        <!-- END Page Content -->
    </div>
    <!-- END Page Wrapper -->
    <!-- LOST END Quick Menu -->
    {#include template="include/color-profile"/#}
    <script src="js/vendors.bundle.js"></script>
    <script src="js/app.bundle.js"></script>
    <script type="text/javascript">
        /* Activate smart panels */
        // $('#js-page-content').smartPanel();

    </script>
    <!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
    <script src="js/statistics/peity/peity.bundle.js"></script>
    <script src="js/statistics/flot/flot.bundle.js"></script>
    <script src="js/statistics/easypiechart/easypiechart.bundle.js"></script>
    <script src="js/datagrid/datatables/datatables.bundle.js"></script>
    <script>

        $(document).ready(function () {
            // var updatingChart = $(".updating-chart").peity("line",
            //     {
            //         fill: color.info._500,
            //         stroke: color.info._700,
            //         width: "210",
            //         height: 40
            //     });
            // setInterval(function () {
            //     var random = Math.round(Math.random() * 10)
            //     var values = updatingChart.text().split(",")
            //     values.shift()
            //     values.push(random)

            //     updatingChart
            //         .text(values.join(","))
            //         .change()
            // }, 500);
            uim.api.emit({
                code: 'report.resourceCount',
                data: {},
                success: function (data) {
                    $(data.resource_counts.count_server.split(',')).each(function () {
                        let tmp_arr = this.split('-');
                        let server_type = tmp_arr[0], server_count = tmp_arr[1];
                        data.resource_counts['count_server' + server_type] = server_count;
                    });
                    $('.show-count').each(function () {
                        $(this).text(data.resource_counts[$(this).data('type')] || '0');
                    });
                },
                error: function (err) {
                    bootbox.alert('获取资源数量失败：' + err.text);
                    return true;
                }
            });


            var flotVisit = $.plot('#flotVisit', [
                {
                    data: [
                        [3, 0],
                        [4, 1],
                        [5, 3],
                        [6, 3],
                        [7, 10],
                        [8, 11],
                        [9, 12],
                        [10, 9],
                        [11, 12],
                        [12, 8],
                        [13, 5]
                    ],
                    color: color.success._200
                },
                {
                    data: [
                        [1, 0],
                        [2, 0],
                        [3, 1],
                        [4, 2],
                        [5, 2],
                        [6, 5],
                        [7, 8],
                        [8, 12],
                        [9, 9],
                        [10, 11],
                        [11, 5]
                    ],
                    color: color.info._200
                }
            ],
                {
                    series: {
                        shadowSize: 0,
                        lines: {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor:
                            {
                                colors: [
                                    {
                                        opacity: 0
                                    },
                                    {
                                        opacity: 0.12
                                    }]
                            }
                        }
                    },
                    grid: {
                        borderWidth: 0
                    },
                    yaxis: {
                        min: 0,
                        max: 15,
                        tickColor: '#ddd',
                        ticks: [
                            [0, ''],
                            [5, '100K'],
                            [10, '200K'],
                            [15, '300K']
                        ],
                        font:
                        {
                            color: '#444',
                            size: 10
                        }
                    },
                    xaxis: {
                        tickColor: '#eee',
                        ticks: [
                            [2, '2am'],
                            [3, '3am'],
                            [4, '4am'],
                            [5, '5am'],
                            [6, '6am'],
                            [7, '7am'],
                            [8, '8am'],
                            [9, '9am'],
                            [10, '1pm'],
                            [11, '2pm'],
                            [12, '3pm'],
                            [13, '4pm']
                        ],
                        font: {
                            color: '#999',
                            size: 9
                        }
                    }
                }
            );
            // parent.setIframeHeight(view_name);


        });

    </script>

    {#include template="include/common"/#}
</body>

</html>